<template>
	<div class="words">
		<div class="flex align-center justify-center margin-lr-xs">
			<img class="logo" src="@/assets/word/book.png"></img>
			<span class="text-bold-sm text-lg" v-if="wordInfo">{{ wordInfo.version_full_name}}</span>
		</div>
		<div class="flex align-center justify-center margin-top-sm text-gray margin-lr-xs text-df" v-if="wordInfo">
			{{ wordInfo.words_count}}个单词
		</div>
		<div class="flex justify-center tag">
			<van-tag type="danger">学习中</van-tag>
		</div>
		<div class="flex justify-between word-count margin-lr-xs">
			<div class="flex flex-direction align-center">
				<span class="text-green text-sl text-bold-sm">{{ pickerModel?.[0] }}</span>
				<span class="margin-top-xs text-sm text-gray">我计划完成天数</span>
			</div>
			<div class="flex flex-direction align-center">
				<span class="text-green text-sl text-bold-sm">{{ pickerModel?.[1]}}</span>
				<span class="margin-top-xs text-sm text-gray">每天背单词个数</span>
			</div>
		</div>
		<div class="word-bottom"></div>
		<div class="text-center margin-top-sm text-bold-sm text-sm">我计划完成天数/每天背单词个数</div>
		<div class="time text-green margin-lr-xs" v-if="planTime">
			<span class="iconfont cuIcon-remind margin-right-xs"></span>
			<span @click="onTime">计划完成时间：{{ planTime }}</span>
		</div>
		<div class="solid-bottom"></div>
		<van-picker v-model="pickerModel" v-if="columns && columns.length > 0 " :columns="columns"
			:columns-field-names="customFieldName" :show-toolbar="false" @change="onchangeTime"> </van-picker>
		<!-- <div class="cu-progress round margin-top xs margin-lr-xs">
             <span class="bg-green" :style="[{ width: '20%'}]"></span>
         </div>
         <div class="flex justify-end align-baseline margin-top-xs margin-lr-xs text-sm "><span class="text-gray">已学完</span> <span class="flex text-lg text-green margin-left-xs">6</span><span>/898</span></div>
         <div class="btn-list margin-top-xs">
             <button class="cu-btn round line-gray text-black" @click="onSkip('/words-list')">单词列表</button>
             <button class="cu-btn round line-gray text-black" @click="onSkip('/plan-word')">制定计划</button>
         </div> -->
		<!-- <van-calendar v-model:show="show" @confirm="onConfirm" visible-option-num="4"  color="#0CB76C"/> -->

	</div>
</template>

<script setup lang="ts">
	import { useRouter } from 'vue-router'
	import { onMounted, ref, watchEffect, defineEmits } from 'vue';
	import {
		request
	} from "@/api/request";
	import dayjs from 'dayjs'
	const router = useRouter()
	const pickerModel = ref([])
	const wordInfo = ref()
	const show = ref(false)
	// ref(dayjs().format('YYYY-MM-DD'))
	const planTime = ref(null)
	const emits = defineEmits('getParams')
	const customFieldName = {
		text: 'day',
		value: 'day',
		children: 'list',
	};
	const columns = ref([])
	onMounted(() => {
		getData()
	})
	const getData = () => {
		request({
			url: `https://d-xueer.bigchun.com/api/reciting/index`,
			method: 'get'
		}).then(res => {
			wordInfo.value = res.data;
			getSetting()
		})
	};

	const getSetting = async () => {
		request({
			url: `https://d-xueer.bigchun.com/api/reciting/getSetting`,
			method: 'get'
		}, {
			query: {
				version_id: wordInfo.value.version_full_name_id,
			}
		}).then(res => {
			if (res.data && res.data.days.length > 0) {
				columns.value = res.data.days.map((item, index) => {
					return {
						day: `${item}天`,
						list: res.data.count && res.data.count.length > 0 ? [{ day: `${res.data.count[index]}个` }] : []
					};
				})
				columns.value.map((item, index) => {
					if (index == res.data.index) {
						pickerModel.value = [item.day, item.list[0].day]
					}
				})
			}
		})
	}
	watchEffect(() => {
		if (pickerModel.value?.[0]) {
			planTime.value = dayjs().add(parseInt(pickerModel.value?.[0]), 'day').format('YYYY-MM-DD')
		}
		if (planTime.value || pickerModel.value) {
			emits('getParams', { version_id: wordInfo.version_full_name_id, count: parseInt(pickerModel.value?.[1]), end_day: parseInt(pickerModel.value?.[0]), date: planTime.value })
		}
	})
	const onTime = () => {
		show.value = true
	}

	const onchangeTime = () => {
	}

	const onConfirm = (val) => {
		planTime.value = dayjs(val).format('YYYY-MM-DD')
		show.value = false
	}
	const onSkip = (path) => {
		router.push(path)
	}
</script>

<style lang="scss" scoped>
	@import '../style/icon.scss';
	@import '../style/index.scss';
	@import '../style/main.scss';

	.words {
		background-color: #fff;
		margin: 10px;
		border-radius: 20px;
		height: calc(100vh - 200px);
		padding: 22px 0px;
		overflow: hidden;

		:deep(.van-picker-column__item--selected) {
			color: #0CB76C
		}

		.tag {
			margin-top: 6px;
		}

		img {
			width: 24px;
			height: 26px;
			margin-right: 10px;
		}

		.word-count {
			margin-top: 10px;
			padding: 0 60px 20px 60px;
		}

		.word-bottom {
			width: 100%;
			background-color: #E5E5E5;
			height: 1px;
		}

		.time {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: rgba(12, 183, 108, 0.1);
			border-radius: 18px;
			height: 28px;
			margin-top: 10px;
			font-size: 14px;
		}

		.btn-list {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 20px;
			padding: 0 30px;
		}
	}
</style>